<template>
    <div class="">
      <loading v-if="isShowLoading"></loading>
      <div class="flex_center"  v-if="!isShowLoading">
        <div class="bodyContent overFlow">
          <div class="personal_top positon_rel">
            <div class="personal_top_red bac_url_img " >  <!--v-lazy:background-image="{src: img}"-->
              <div class="user_text">
                <div class="flex">
                  <div class="img_user">
                    <img :src="img" v-if="img != ''">
                    <img src="../../assets/img/01.jpg" v-if="img == ''">
                  </div>
                  <div class="mobile">
                    <p>昵称：{{nickname}}</p>
                    <p>ID：{{mid}}</p>
                  </div>
                </div>
                <i style="font-size: 1.5rem" @click="setMobile()" class="fa fa-cog"></i>
                <!--<img @click="setMobile()" src="../../assets/img/done.png" class="done">-->
              </div>
            </div>
            <div class="positon_ab user_num usr_flex">
              <div class=" bac_write write_num des_flex">
                <router-link :to="'/qds/ticket'">
                  <div>
                    <p class="font-weight">水票</p>
                    <p style="color: rgb(255, 179, 17)">{{total_waterbill_num}}</p>
                  </div>
                </router-link>
                <router-link :to="'/qds/bucket'">
                  <div>
                    <p class="font-weight">水桶</p>
                    <p style="color:rgb(255, 179, 17)">{{total_bucket_num}}</p>
                  </div>
                </router-link>
                <router-link :to="'/qds/cash'">
                  <div>
                    <p class="font-weight">押金<p>
                    <p style="color: rgb(255, 179, 17)">{{deposit}}</p>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
          <div class="none" style="margin-bottom: 0.5rem">
            <router-link :to="''">
              <div class="share flex">
                <div class="share_img positon_re">
                  <img src="../../assets/img/01.jpg">
                  <p class="positon_ab">我的推广</p>
                </div>
              </div>
            </router-link>
          </div>
          <div class="function_module">
            <router-link :to="'/qds/addressList'">
              <div class="module_demo">
                <div class="demo_text flex j_c_a">
                  <p class="flex">
                    <span class="demo_fa"><i style="color: #25BDEF;" class="fa fa-map-marker i_style"></i></span>
                    <span>收货地址</span>
                  </p>
                  <img src="../../assets/img/svg/next.svg">
                </div>
              </div>
            </router-link>
            <!--<router-link :to="'/qds/waterBillShare'">-->
              <div class="module_demo" @click="setMobile()">
                <div class="demo_text flex j_c_a">
                  <p class="flex">
                    <span class="demo_fa"><i style="color: rgb(255, 179, 17);" class="fa fa-database i_style"></i></span>
                    <span>手机验证</span>
                  </p>
                  <img src="../../assets/img/svg/next.svg">
                </div>
              </div>
            <!--</router-link>-->
            <router-link :to="'/qds/myExtend'">
              <div class="module_demo">
                <div class="demo_text flex j_c_a">
                  <p class="flex">
                    <span class="demo_fa"><i style="color: #ff0000;" class="fa fa-money i_style"></i></span>
                    <span>我的推广</span>
                  </p>
                  <img src="../../assets/img/svg/next.svg">
                </div>
              </div>
            </router-link>
            <router-link :to="'/qds/waterBillShare'">
              <div class="module_demo">
                <div class="demo_text flex j_c_a">
                  <p class="flex">
                    <span class="demo_fa"><i style="color: #6AC20B;" class="fa fa-cny i_style"></i></span>
                    <span>水票共享</span>
                  </p>
                  <img src="../../assets/img/svg/next.svg">
                </div>
              </div>
            </router-link>
            <router-link :to="'/qds/infoMove'">
              <div class="module_demo">
                <div class="demo_text flex j_c_a">
                  <p class="flex">
                    <span class="demo_fa"><i style="color: #25BDEF;" class="fa fa-clone i_style"></i></span>
                    <span>账号移交</span>
                  </p>
                  <img src="../../assets/img/svg/next.svg">
                </div>
              </div>
            </router-link>
            <router-link :to="'/qds/shopChange'">
              <div class="module_demo">
                <div class="demo_text flex j_c_a">
                  <p class="flex">
                    <span class="demo_fa"><i style="color: #FFB311;" class="fa fa-institution i_style"></i></span>
                    <span>店铺切换</span>
                  </p>
                  <img src="../../assets/img/svg/next.svg">
                </div>
              </div>
            </router-link>
            <div class="module_demo" @click="deleteCache()">
              <div class="demo_text flex j_c_a">
                <p class="flex">
                  <span class="demo_fa"><i style="color: #F0686B;" class="fa fa-repeat i_style"></i></span>
                  <span>清除缓存</span>
                </p>
                <img src="../../assets/img/svg/next.svg">
              </div>
            </div>
            <router-link :to="'/qds/aboutUs'">
              <div class="module_demo">
                <div class="demo_text flex j_c_a">
                  <p class="flex">
                    <span class="demo_fa"><i style="color: #25BDEF;" class="fa fa-cube i_style"></i></span>
                    <span>关于我们</span>
                  </p>
                  <img src="../../assets/img/svg/next.svg">
                </div>
              </div>
            </router-link>
            <router-link :to="'/qds/usSupport'">
              <div class="module_demo">
                <div class="demo_text flex j_c_a">
                  <p class="flex">
                    <span class="demo_fa"><i style="color: #6AC20B;" class="fa fa-handshake-o i_style"></i></span>
                    <span>技术支持</span>
                  </p>
                  <img src="../../assets/img/svg/next.svg">
                </div>
              </div>
            </router-link>
          </div>
          <!--<validate-app></validate-app>-->
        </div>
      </div>
      <footer-app :type=3></footer-app>
    </div>
</template>

<script>
  import headerTitle from '../headerTilte'
  import footerApp from './../public_components/foot'
  import Loading from "../../components/loading";
    export default {

        data(){
          return{
            isShowLoading:true,
            title:'个人中心',
            mobile:'',
            mid:'',
            total_waterbill_num:0,
            total_bucket_num:0,
            deposit:0,
            img:'',
            nickname:'',
            bac_img:'img/water.png'
          }
        },
        mounted(){
            this.checkLogin();
            this.initH();
            this.initPersonal();
        },

        methods:{
          initH(){
            var allH = document.documentElement.clientHeight;
            /*var headerH = $('.header').height();*/
            var footH = $('.foot').height();
            var h = allH -  footH;
            $('.overFlow').css('height',h + 'px');
          },
          initPersonal(){
            this.yesS.bucketMember(
              this.$comParams()
            ).then(res => {
              var personal = res.data.info;
              if(!this.isEmpty(personal)){
                this.mid = personal.mid;
                this.mobile = personal.mobile;
                this.total_waterbill_num = personal.total_waterbill_num;
                this.total_bucket_num = personal.total_bucket_num;
                this.deposit = personal.deposit;
                this.img = personal.avatarurl;
                this.nickname = personal.nickname;
              }
              this.isShowLoading = false;
            })

          },

          setMobile:function () {
            this.$router.push({path: '/qds/phoneCheck'});
            console.log(1)
          },

          deleteCache(){
            this.logout();
          }

        },
        components:{
          Loading,
          footerApp,headerTitle
        }
    }
</script>

<style scoped>
  /*@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';*/
@import "css/personal.css";
  .header{
    position: fixed;
  }
a{
  color: #2c3e50!important;
}
</style>
